<style>
    .chebox {
        width: 93%;
        height: 32px;
        float: left;
    }

    .chebox label {
        margin-right: 50px;
        font-weight: normal;
        user-select: none;
    }
</style>
<div id="main">
    <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
        <h4 class="modal-title" id="ntModalLabel">{:lang('change_company_bank_account')}</h4>
    </div>
    <form class="modal-body formbox">
        <div class="row clearfix">
            <div class="col-md-12 column">
                <div class="alert alert-dismissable alert-info">
                    <button type="button" class="close">×</button>
                    <p></p>
                </div>
                <table class="table table-striped table-hover ntTable">
                    <colgroup>
                        <col width="150">
                        <col width="700">
                        <col>
                    </colgroup>
                    <tbody>
                    <tr>
                        <td class="col-md-1">{:lang('country')}<span class="required"></span></td>
                        <td>
                            <select class="form-control" name="country_id" id="changeselect">
                                <option value="">{:lang('please_select')}</option>
                                {volist name="countrys" id="vo"}
                                {eq name="vo.id" value="$info.country_id|default=''"}
                                <option value="{$vo.id}" selected>{$vo.name}</option>
                                {else/}
                                <option value="{$vo.id}">{$vo.name}</option>
                                {/eq}
                                {/volist}
                            </select>
                        </td>
                        <td class="col-md-1">{:lang('bank')}<span class="required"></span></td>
                        <td>
                            <select class="form-control" name="banks_id" id="banksselect">
                            </select>
                        </td>
                    </tr>
                    <tr>
                        <td>{:lang('account_opening_bank_branch')}<span class="required"></span></td>
                        <td><input type="text" name="bankname" class="form-control" value="{$info.bankname|default=''}">
                        </td>
                        <td>{:lang('account_name')}<span class="required"></span></td>
                        <td>
                            <input type="text" class="form-control" name="account_name"
                                   value="{$info.account_name|default=''}">
                        </td>
                    </tr>
                    <tr>
                        <td>{:lang('account')}<span class="required"></span></td>
                        <td>
                            <div class="input-group" style="width:100%">
                                <input type="text" class="form-control" name="account_num"
                                       value="{$info.account_num|default=''}">
                                <span class="input-group-addon">
                                                <input type="checkbox" name="is_main"
                                                       value="1" {eq name="$info.is_main|default=''" value="1"
                                                       }checked="checked" {/eq}> {:lang('main')}
                                            </span>
                                <span class="input-group-addon">
                                                <input type="checkbox" name="is_public"
                                                       value="1" {eq name="$info.is_public|default=''" value="1"
                                                       }checked="checked" {/eq}> {:lang('open_to_public')}
                                            </span>
                            </div>
                        </td>
                        <td>{:lang('type')}<span class="required"></span></td>
                        <td>
                            <label class="checkbox-inline">
                                <input type="checkbox" name="is_payment[]" value="1" {in name="1"
                                       value="$info.is_payment|default=''"
                                       }checked="checked" {/in}> {:lang('collection')}
                            </label>
                            <label class="radio-inline">
                                <input type="checkbox" name="is_payment[]" value="2" {in name="2"
                                       value="$info.is_payment|default=''"
                                       }checked="checked" {/in}> {:lang('payment')}
                            </label>
                        </td>
                    </tr>
                    <tr>
                        <td>{:lang('employee_authorized')}<span class="required"></span></td>
                        <td>
                            <div class="row" style="padding:0em 1em">
                                <div class="input-group col-md-12">
                                    <div class="input-group-btn">
                                        <select class="form-control" name="" id="selform" class=""
                                                style="min-width: 150px;">
                                            <option value="">{:lang('please_select')}</option>
                                        </select>
                                    </div><!-- /btn-group -->
                                    <input type="text" class="form-control" id="adminname">
                                    <span class="input-group-btn">
                                        <button type="button" class="btn btn-default quesel">
                                            <span class="glyphicon glyphicon-search"></span>{:lang('search')}
                                        </button>
                                    </span>
                                </div>
                            </div>
                        </td>
                        <td colspan="2">
                            <div class="input-group" style="width:100%">
                                <select class="form-control adminsel">
                                    <option value="">{:lang('please_select_a_employee')}</option>
                                </select>
                                <span class="input-group-btn">
                                    <button type="button" class="btn btn-default addadmin">
                                        <span class="fa fa-plus"></span>{:lang('add')}
                                    </button>
                                </span>
                            </div>
                        </td>
                    </tr>
                    <tr style="display: none;">
                        <td></td>
                        <td class="hassel" colspan="3">
                            {if isset($info.dname)}
                            {volist name="$info.dname" id="vo"}
                            <div class="col-md-3 col-sm-4 col-xs-6 valitem" style="padding:4px">
                                <div class="input-group input-group-sm">
                                    <input type="text" class="form-control" keyval="{$vo.id}" name="val_zh"
                                           value="{$vo.nickname}">
                                    <span class="input-group-btn">
                                    <button type="button" class="btn btn-default delbtn"> <span
                                            class="glyphicon glyphicon-remove" style="margin:0"></span></button></span>
                                </div>
                            </div>
                            {/volist}
                            {/if}
                        </td>
                    </tr>
                    </tbody>
                </table>
            </div>
        </div>
        <input type="hidden" id="act" name="act" value="{$str}">
        <input type="hidden" name="id" id="id" value="{$info.id|default=''}">
        <input type="hidden" id="langaccoun" value="{$lang|default=''}">
        <span id="banks_id" style="display: none;">{$info.banks_id|default=''}</span>
        <span id="country_ids" style="display: none;">{$info.country_id|default=''}</span>
    </form>
    <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal"><span
                class="glyphicon glyphicon-remove"></span>{:lang('cancel')}
        </button>
        <button type="button" id="quedin" class="btn btn-primary" style="padding-left:24px;padding-right:24px"><span
                class="glyphicon glyphicon-floppy-disk"></span>{:lang('save')}
        </button>
    </div>
</div>
<script>
    var has = []
    var selval = []
    var act = $('#act').val();
    var banks_id = $('#banks_id').text();
    var country_id = $('#country_ids').text();
    getbanks(country_id);
    if (act == 'accountsedit') {
        $('.hassel').parents('tr').css('display', 'table-row')
        $('.hassel input').each(function (index, item) {
            selval.push($(item).attr('keyval'))
        })
    }
    $('#quedin').click(subfn)
    //数据的提交
    var addbm = true;
    function subfn() {
        if (addbm) {
            $.ajax({
                url: '/Admin/collections/' + act,
                type: 'post',
                data: $(".formbox").serialize() + '&admin_ids=' + selval,
                dataType: 'json',
                success: function (res) {
                    if (res.status != 1) {
                        change_mes_type('.modal-body .alert',res.status)
                        $('.modal-body .alert').show()
                        $('.modal-body .alert p').html('*' + res.msg + '<br>')
                        //toastr.warning(res.msg)
                    } else {
                        change_mes_type('.alert',res.status)
                        addbm = false
                        $('.alert').show()
                        $('.alert p').html('*' + res.msg + '<br>')
                        $('#account_editModal').modal('hide')
                    }
                }
            });
        }
    }
    $('#changeselect').change(function () {
        //改变国家获取对应的银行
        var country_id = $('#changeselect').val();
        getbanks(country_id);
    });
    function getbanks(country_id) {
        new Promise((resfun, rejfun) => {
            $.ajax({
                url: '/admin/collections/' + act,
                type: 'post',
                data: {
                    country_id: country_id,
                    getbanks: ''
                },
                dataType: 'json',
                success: function (res) {
                    if (res.length) {
                        var html = "<option value=''>{$Think.lang.please_select}</option>"
                        for (var i = 0; i < res.length; i++) {
                            var id = res[i].id;
                            if (id == banks_id) {
                                html += '<option selected value="' + res[i].id + '">' + res[i].name + '</option>';
                            } else {
                                html += '<option value="' + res[i].id + '">' + res[i].name + '</option>';
                            }
                        }
                        $('#banksselect').html(html);
                    } else {
                        $('#banksselect').html("<option value=''>{$Think.lang.please_select}</option>");
                    }
                    resfun()
                }
            })
        }).then(getposi(country_id + ',0'))

    }
    //渲染所属部门的数据
    $(document).keydown(function (event) {
        if (event.keyCode == 13) {
            $('form').each(function () {
                event.preventDefault();
            });
            subfn()
        }
    });
    $('.quesel').click(getdata)
    function getdata() {
        $.ajax({
         url: '/admin/collections/'+$('#act').val(),
         type: 'post',
         data: {
         position_id: $('#selform').val(),
         nickname: $('#adminname').val(),
         admindata:''
         },
         success: function (data) {
            data = JSON.parse(data)
            var strhtml = ""
            data.forEach(element => {
                strhtml+='<option value="'+element.id+'">'+element.nickname+'</option>'
            });
            $('.adminsel').html(strhtml)
         }
         })
    }
    //getdata()
    function getposi(country_id) {
        var str = country_id.split(',');
        if (str.indexOf('') == -1) {
            $.ajax({
                url: '/admin/api/postionfrmaes',
                type: 'post',
                data: {
                    country_id,
                    lang: $('#langaccoun').val(),
                    table: 'position'
                },
                success: function (data) {
                    var strhtml = '<option value="">{$Think.lang.please_select}</option>'
                    data = JSON.parse(data)
                    data.forEach(element => {
                        var level = ""
                        for (var i = 0; i < element.level; i++) {
                            level += "&emsp;"
                        }
                        strhtml += '<option value="' + element.id + '">' + level + element.langname + '</option>'
                        $('#selform').html(strhtml)
                    });
                }
            })
        }
    }
    $('.addadmin').click(function () {
        var strhtml = ""
        strhtml = '<div class="col-md-3 col-sm-4 col-xs-6 valitem" style="padding:4px"><div class="input-group input-group-sm"><input type="text" class="form-control" keyval="' + $('.adminsel').val() + '" name="val_zh" value="' + $('.adminsel').find("option:selected").text() + '"><span class="input-group-btn"> <button type="button" class="btn btn-default delbtn"> <span class="glyphicon glyphicon-remove" style="margin:0"></span></button></span></div></div>'
        if(selval.indexOf($('.adminsel').val())==-1 && $('.adminsel').val() != 0){
            selval.push($('.adminsel').val())
            $('.hassel').parents('tr').css('display', 'table-row')
            $('.hassel').append(strhtml)
            $('.delbtn').click(deldom)
        }
    })
    function deldom() {
        selval.splice(selval.indexOf($(this).parents('.valitem').find('input').attr('keyval')), 1)
        $(this).parents('.valitem').remove()
    }
    $('.delbtn').click(deldom)
</script>